<template>
  <div id="login" class="login-container">
    <div class="login-form">
      <h2>登录</h2>
      <input type="text" v-model="username" placeholder="用户名" class="input-field" />
      <input type="password" v-model="password" placeholder="密码" class="input-field" />
      <button @click="login" class="login-button">登录</button>
    </div>
  </div>
</template>
  
  <script setup>
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

axios.defaults.baseURL = 'http://127.0.0.1:3000'
let router = useRouter()
let username = ref('')
let password = ref('')

let login = async () => {
  let obj = { username: username.value, password: password.value }
  let {
    data: { code, user }
  } = await axios.post('/login', obj)
  if (code == 200) {
    alert('登陆成功')
    localStorage.setItem('userId', user._id)
    localStorage.setItem('username', user.username)
    router.push('/home')
  } else {
    alert('登陆失败')
  }
}


</script>
  
  <style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #74ebd5, #acb6e5);
}

.login-form {
  background: white;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 300px;
}

h2 {
  margin-bottom: 20px;
  color: #333;
}

.input-field {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.input-field:focus {
  border-color: #74ebd5;
  outline: none;
}

.login-button {
  width: 100%;
  padding: 10px;
  background-color: #74ebd5;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-button:hover {
  background-color: #5cbfba;
}
</style>
  